<template>
  <div>
    <!-- 顶部区域 -->
    <van-nav-bar
      title="修改信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #left>
        <div class="nav-left">返回</div>
      </template>
    </van-nav-bar>
    <!-- /顶部区域 -->

    <!-- 头像文件上传 -->
    <input type="file" v-show="false" ref="input" v-on:change="changeimge" />
    <!-- /头像文件上传 -->

    <van-cell-group>
      <van-cell title="头像" value="内容" is-link center @click="setimge"
        ><template #default>
          <img :src="photo" class="userimge" />
        </template>
      </van-cell>
      <van-cell title="昵称" value="内容" is-link
        ><template #default>
          <span class="custom-title">{{ name }}</span>
        </template></van-cell
      >
      <van-cell title="性别" value="内容" is-link @click="setname"
        ><template #default>
          <span class="custom-title">单元格</span>
        </template></van-cell
      >
      <van-cell title="生日" value="内容" is-link
        ><template #default>
          <span class="custom-title">单元格</span>
        </template></van-cell
      >
    </van-cell-group>

    <!-- 图片裁切弹层 -->
    <van-popup
      v-model="photoshow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <photoclopp
        :imge="imge"
        :photoshow="photoshow"
        @closer="(photoshow = $event), (imge = $event)"
        v-if="imge"
        @updata-photo="(photo = $event), (photoshow = false)"
      />
    </van-popup>
    <!-- /图片裁切弹层 -->

    <!-- 设置昵称弹出层 -->
    <van-popup v-model="nameshow" position="bottom" :style="{ height: '30%' }">
      <name />
    </van-popup>
    <!-- /设置昵称弹出层 -->
  </div>
</template>

<script>
import photoclopp from "./photoclopp.vue";
import name from "./name.vue";

export default {
  data() {
    return {
      photoshow: false, //图片裁切弹层状态
      nameshow: false, //昵称弹出层
      imge: null, //图片对象
      photo: null, //头像
      name: "", //昵称
    };
  },
  components: {
    photoclopp,
    name,
  },

  created() {
    this.photo = JSON.parse(this.$route.query.user).photo;
    this.name = JSON.parse(this.$route.query.user).name;
  },
  methods: {
    // 返回路由
    onClickLeft() {
      this.$router.back();
    },

    // 设置头像
    //通过点击头像cell组件 转而点击input-file
    setimge() {
      this.$refs.input.click();
    },

    // 图片改变事件 input-file
    changeimge($event) {
      // 获取文件对象: File {name: '4a6997facdea4f3bd05204760e2c9dbc_7450282101186856458.jpg', lastModified: 1634364588000, lastModifiedDate: Sat Oct 16 2021 14:09:48 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 31595, …}
      let imge = $event.target.files[0];
      // console.log(imge); File {name: '4a6997facdea4f3bd05204760e2c9dbc_7450282101186856458.jpg', lastModified: 1634364588000, lastModifiedDate: Sat Oct 16 2021 14:09:48 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 31595, …}
      // 基于文件对象获取blob地址：http://localhost:8080/0e0e221d-1a04-49b6-b5ec-325ffe584d3d
      this.imge = window.URL.createObjectURL(imge);
      console.log(this.imge); //blob:http://localhost:8080/0e0e221d-1a04-49b6-b5ec-325ffe584d3d
      //打开图片裁切图层
      this.photoshow = true;
      //重置input内容

      $event.target.value = "";
    },

    // 设置昵称
    setname() {
      this.nameshow = true;
    },
  },
};
</script>

<style lang="less" scoped>
.nav-left {
  color: #fff;
}
.userimge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
</style>